<!doctype html>

<html>
  	<head>
    		<meta charset=utf-8>
		<title>CSS Reference</title>
		<link rel=stylesheet type=text/css href=default.css>
	</head>
	
<body>
	<div id="header">CSS Reference Guide</div>

<div id="navigation">
   <ul>
    <li id="selected">background</a></li>
    <li><a href="border.html">border</a></li>
    <li><a href="clear.html">clear</a></li>
    <li><a href="color.html">color</a></li>
    <li><a href="display.html">display</a></li>
    <li><a href="float.html">float</a></li>
    <li><a href="font.html">font</a></li>
    <li><a href="height.html">height</a></li>
    <li><a href="letter-spacing.html">letter-spacing</a></li>
    <li><a href="line-height.html">line-height</a></li>
    <li><a href="list-style.html">list-style</a></li>
    <li><a href="margin.html">margin</a></li>
    <li><a href="overflow.html">overflow</a></li>
    <li><a href="padding.html">padding</a></li>
    <li><a href="text-align.html">text-align</a></li>
    <li><a href="text-decoration.html">text-decoration</a></li>
    <li><a href="text-indent.html">text-indent</a></li>
    <li><a href="text-transform.html">text-transform</a></li>
    <li><a href="vertical-align.html">vertical-align</a></li>
    <li><a href="width.html">width</a></li>
  </ul>
</div>
<div id="content">
<h1>CSS Background Property</h1>
<h2>Definition and Usage</h2>
<p>
The properties that can be set, are: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.</p>
<p>It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.</p>

<table id="values">
	<tr>
		<th>Default value:</th>
		<td>see individual properties</td>
	</tr>
	<tr>
		<th>Inherited:</th>
		<td>no</td>
	</tr>
	<tr>
		<th>Animatable:</th>
		<td>yes, see individual properties</td>
	</tr>
	<tr>
		<th>Version:</th>
		<td>CSS1 + new properties in CSS3</td>
	</tr>
	<tr>
		<th>JavaScript Syntax:</th>
		<td>object.style.background="red url(smiley.gif) top left no-repeat" </td>
	</tr>
</table>


<h3>CSS Syntax</h3>
<div id="syntax">
background: color position/size repeat origin clip attachment image|initial|inherit;
</div>

<h3>Property Values</h3>
<table id="properties">
	<tr>
		<th>Value</th>
		<th>Description</th>
		<th>CSS Version</th>
	</tr>
	<tr>
		<td>background-color</td>
		<td>Specifies the background color to be used</td>
		<td>1</td>
		
	</tr>
	<tr>
		<td>background-position</td>
		<td>Specifies the position of the background images</td>
		<td>1</td>
	</tr>
	<tr>
		<td>background-size</td>
		<td>Specifies the size of the background images</td>
		<td>3</td>
	</tr>
		<tr>
		<td>background-repeat</td>
		<td>Specifies how to repeat the background images</td>
		<td>1</td>
	</tr>
			<tr>
		<td>background-origin</td>
		<td>Specifies the positioning area of the background images.</td>
		<td>3</td>
	</tr>
	<tr>
		<td>background-clip</td>
		<td>Specifies the painting area of the background images.</td>
		<td>3</td>
	</tr>
	<tr>
		<td>background-attachment</td>
		<td>Specifies whether the background images are fixed or scrolls with the rest of the page</td>
		<td>1</td>
	</tr>
	<tr>
		<td>background-image</td>
		<td>Specifies ONE or MORE background images to be used</td>
		<td>1</td>
	</tr>
	<tr>
		<td>initial</td>
		<td>Sets this property to its default value.</td>
		<td>3</td>
	</tr>
	<tr>
		<td>inherit</td>
		<td>Inherits this property from its parent element.</td>
		<td>2</td>
	</tr>
</table>

<h3>Code</h3>
<div id="code">
<pre>
<code>
div.bg-example {
    background: #00ff00 url("smiley.gif") repeat-y;
} 
</code></pre>
</div>
<h3>Example</h3>
<div class="bg-example">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
</div>
</div>
<div id="footer">
&copy; HTML Class of 2015
</div>

</body>	

</html>